{% extends 'base_dashboard.html' %}

{% block title %}Categories — {{ site_settings.institute_name }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-start mb-4">
  <div>
    <h4 class="fw-bold mb-1">Categories</h4>
    <p class="text-muted small mb-0">Organize courses and certifications by category</p>
  </div>
  <a href="{% url 'dashboard:category_create' %}" class="btn btn-primary">
    <i class="bi bi-plus-lg me-1"></i>Add category
  </a>
</div>

<div class="card border-0 shadow-sm rounded-4">
  <div class="table-responsive">
    <table class="table table-hover mb-0 align-middle">
      <thead class="table-light">
        <tr>
          <th>Name</th>
          <th>Applies to</th>
          <th>Order</th>
          <th>Status</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for cat in categories %}
        <tr>
          <td>
            <div class="fw-semibold">{{ cat.name }}</div>
            {% if cat.description %}<div class="small text-muted">{{ cat.description }}</div>{% endif %}
          </td>
          <td><span class="badge bg-light text-dark border">{{ cat.get_applies_to_display }}</span></td>
          <td>{{ cat.order }}</td>
          <td>
            {% if cat.is_active %}
              <span class="badge bg-success-subtle text-success">Active</span>
            {% else %}
              <span class="badge bg-secondary-subtle text-secondary">Inactive</span>
            {% endif %}
          </td>
          <td class="text-end">
            <a href="{% url 'dashboard:category_edit' cat.pk %}" class="btn btn-sm btn-outline-primary">Edit</a>
            <form method="post" action="{% url 'dashboard:category_delete' cat.pk %}" class="d-inline" onsubmit="return confirm('Delete this category?');">
              {% csrf_token %}
              <button class="btn btn-sm btn-outline-danger">Delete</button>
            </form>
          </td>
        </tr>
        {% empty %}
        <tr><td colspan="5" class="text-center text-muted py-5">No categories yet. Add one to start organizing courses and certifications.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}